<!doctype html>
<html lang="en" dir="ltr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta http-equiv="Content-Language" content="en" />
  <meta name="msapplication-TileColor" content="#2d89ef">
  <meta name="theme-color" content="#4188c9">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <link rel="icon" href="./favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
  <title>账户注册</title>
  <script src="./assets/js/require.min.js"></script>
  <script src="./assets/js/owner_work.js"></script>
  <link href="./assets/css/dashboard.css" rel="stylesheet" />
  <script src="./assets/js/dashboard.js"></script>
</head>

<body class="">
  <div class="" role="alert" id="alert_tip">
    <i class="" aria-hidden="true"></i> <span> </span>
  </div>
  <div class="page">
    <div class="page-single">
      <div class="container">
        <div class="row">
          <div class="col col-login mx-auto">
            <div class="text-center mb-6">
              <h2 class="mt-0 mb-4">Owner-work</h2>
            </div>
            <div class="dimmer " id="dimmer_body">
              <div class="loader"></div>
              <form class="card dimmer-content">
                <div class="card-body p-6">
                  <div class="card-title">创建账户</div>
                  <div class="form-group">
                    <label class="form-label">昵称</label>
                    <input type="text" class="form-control" name="nick_name" placeholder="昵称">
                  </div>
                  <div class="form-group">
                    <label class="form-label">邮箱</label>
                    <input type="email" class="form-control" name="email" placeholder="邮箱">
                  </div>
                  <div class="form-group">
                    <label class="form-label">验证码</label>
                    <div class="form-label">
                      <input type="text" class="form-control" name="verifi_code" placeholder="验证码">
                      <div class="input-icon-addon">
                        <button id="get_verifi_code" type="button" class="btn btn-secondary" onclick="getVerificationCode()" style="width: 93px; margin-top: -39px; margin-right: 30px;">获取验证码 </button>
                      </div>
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="form-label">密码</label>
                    <input type="password" name="password1" class="form-control" placeholder="密码">
                  </div>
                  <div class="form-group">
                    <label class="form-label">再次输入密码</label>
                    <input type="password" name="password2" class="form-control" placeholder="再次输入密码">
                  </div>
                  <div class="form-group">
                    <label class="custom-control custom-checkbox">
                      <input type="checkbox" id="is_agreed" class="custom-control-input" />
                      <span class="custom-control-label">同意 <a href="./terms.html" target="_banlk">Owner-work 使用条款</a></span>
                    </label>
                  </div>
                  <div class="form-footer">
                    <button type="button" name="btn_create_ac" class="btn btn-primary btn-block disabled" >创建账户</button>
                  </div>
                </div>
              </form>
            </div>

            <div class="text-center text-muted">
              已经有了账户? <a href="./login.html">登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  require(["jquery"], function($){
    let selete = $("#is_agreed")
    let btn_create_ac = $("button[name=btn_create_ac]")
    selete.click(()=>{
      console.log("是否勾选条款：" + selete.is(":checked"))
      if (selete.is(":checked")){
        btn_create_ac.removeClass("disabled")
        btn_create_ac.attr("onclick", "create_account()")
      }else{
        btn_create_ac.addClass("disabled")
        btn_create_ac.removeAttr("onclick")
      }
    })
  });

  // 创建账户
  function create_account() {
    let inputNick = $("input[name=nick_name]").val()
    let inputEmail = $("input[name=email]").val()
    let inputVerificode = $("input[name=verifi_code]").val()
    let inputPassword1 = $("input[name=password1]").val()
    let inputPassword2 = $("input[name=password2]").val()

    // 输入不能为空
    if (inputNick == "" || inputEmail == "" || inputVerificode == "" || inputPassword1 == "" || inputPassword2 == "") {
      showAlert("fe-alert-triangle", `输入不能为空！`, "alert-danger")
      return false
    }
    // 验证邮箱是否有效
    if (checkEmail(inputEmail) != true) {
      showAlert("fe-alert-triangle", `请输入有效邮箱！`, "alert-danger")
      return false
    }
    // 验证密码是否一致
    if (inputPassword1 != inputPassword2) {
      showAlert("fe-alert-triangle", `输入的密码不一致！`, "alert-danger")
      return false
    }

    // 发送数据
    let form_data = {
      nick_name: inputNick,
      email: inputEmail,
      verification_code: inputVerificode,
      password_1: inputPassword1,
      password_2: inputPassword2
    }
    console.log(form_data)
    $("#dimmer_body").addClass("active")
    $.ajax(localStorage.BaseUrl + "/user/register", {
      method: "POST",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify(form_data)
    }).done(function(data){
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
        setTimeout(() => {
          location.href = "./login.html"
        }, 3000);
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(()=>{
      $("#dimmer_body").removeClass("active")
    })
  }

  var InterValObj;      //timer变量，控制时间
  var count = 60*3;     //间隔函数，1秒执行
  var curCount;         //当前剩余秒数
  // 获取验证码
  function getVerificationCode(){
    let inputEmail = $("input[name=email]").val()
    // 输入不能为空
    if (inputEmail == "") {
      showAlert("fe-alert-triangle", `邮箱不能为空！`, "alert-danger")
      return false
    }
    // 验证邮箱是否有效
    if (checkEmail(inputEmail) != true) {
      showAlert("fe-alert-triangle", `请输入有效邮箱！`, "alert-danger")
      return false
    }
    console.log(inputEmail)

    curCount = count
    $("#get_verifi_code").attr("disabled", "true")
    InterValObj = window.setInterval(setRemainTime, 1000)
    $.ajax(localStorage.BaseUrl + "/verifi_code", {
      method: "GET",
      data: {
        email: inputEmail
      }
    }).done(function(data){
      if (data["status"] == 1) {
        showAlert("fe-check", data["msg"], "alert-success")
      } else {
        showAlert("fe-alert-triangle", data["msg"], "alert-danger")
      }
    }).fail(function(xhr, status){
      if (status == "error") {
        showAlert("fe-alert-triangle", `服务器错误！`, "alert-danger")
      }
    }).always(()=>{})
  }

  function setRemainTime(){
    if (curCount == 0){
      window.clearInterval(InterValObj)
      $("#get_verifi_code").removeAttr("disabled")
      $("#get_verifi_code")[0].innerText = "获取验证码"
    }else{
      curCount--
      console.log(curCount)
      $("#get_verifi_code")[0].innerText = "" + curCount
    }
  }
</script>

</html>